<template>
	<button :loading="loading" :disabled="disabled" class="ss-reset-button font-w-600" :class="className" :style="{
		width:width?width + 'rpx':'100%',
		height:height + 'rpx',
		background:!plan?disabled?disabledBg:bgColor:planBg,
		color:plan?borderColorMain?'#33D65E':borderColor:color,
		fontSize:fontSize + 'rpx',
		padding:padding,
		borderRadius:radius + 'rpx',
		loading:loading,
		zIndex:zIndex,
		border:plan?'1px solid ' + (borderColorMain?'#33D65E':borderColor):''
	}">
		<slot></slot>
	</button>
</template>

<script setup>
	defineProps({
		className:{
			type:String,
			default:''
		},
		width:{
			type:String,
			default:''
		},
		height:{
			type:[String,Number],
			default:100
		},
		zIndex:{
			type:[String,Number],
			default:''
		},
		radius:{
			type:[String,Number],
			default:20
		},
		bgColor:{
			type:String,
			default:'linear-gradient( 90deg, #96F182 0%, #33D65E 100%)'
		},
		borderColorMain:{
			type:Boolean,
			default:false
		},
		color:{
			type:String,
			default:'#323233'
		},
		disabledBg:{
			type:String,
			default:'#E8E8E8'
		},
		fontSize:{
			type:[String,Number],
			default:32
		},
		plan:{
			type:Boolean,
			default:false
		},
		planBg:{
			type:String,
			default:''
		},
		disabled:{
			type:Boolean,
			default:false
		},
		borderColor:{
			type:String,
			default:''
		},
		padding:{
			type:[String,Number],
			default:'0 10rpx'
		},
		loading:{
			type:Boolean,
			default:false
		}
	})
</script>

<style>

</style>